<div class="bjui-pageContent">
    <form method="post" action="${ctxPath}/system/cms/water/save" id="j_water_form" data-toggle="validate" data-autorefresh="true" data-alertmsg="false">
        <input TYPE="hidden" name="waterId" value="${water.waterId!}">
        <input TYPE="hidden" name="siteId" value="${session.SysUser.siteId!}">
        <table class="table table-condensed table-hover" width="100%">
            <tbody>
            <tr>
                <td>
                    <label for="waterName" class="control-label x85">水印名称：</label>
                    <input type="text" name="waterName" id="waterName" value="${water.waterName!,xss}" placeholder="水印名称" data-rule="required;" size="25">
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label x85">上传水印：</label>
                    <input type="hidden" id="waterUrl" value="${water.waterUrl!}"/>
                    <div id="uploader" class="maplist wu-example">
						    <!--用来存放文件信息-->
						    <div id="fileList" class="uploader-list"></div>
						    <div id="filePicker" style="margin-left: 43%;">添加水印</div>
					</div>
                    <script type="text/javascript">
	
						var fileBean;
						var $list = $('#fileList');
						var ratio = window.devicePixelRatio || 1;
						var thumbnailWidth = 100 * ratio;
						var thumbnailHeight = 100 * ratio;
					
						// 初始化Web Uploader
						var uploader = WebUploader.create({
							//限制只能上传一张
							fileNumLimit : 1,
							// 选完文件后，是否自动上传。
							auto : true,
							// swf文件路径
							swf : '${ctxPath}/BJUI/plugins/webuploader/Uploader.swf',
							// 文件接收服务端。
							server : '${ctxPath}/uploadImage',
							// 选择文件的按钮。可选。
							// 内部根据当前运行是创建，可能是input元素，也可能是flash.
							pick : {
								id : '#filePicker',
								multiple : false
							},
							// 只允许选择图片文件。
							accept : {
								title : 'Images',
								extensions : 'gif,jpg,jpeg,bmp,png',
								mimeTypes : "gif,jpg,jpeg,bmp,png"
							}
						});
					
						var path = $("#waterUrl").val();
						var imgContent = $("#waterUrl").val();
						if (path!="" && imgContent!="") {
							var lihtml = '<div id="tempId" class="file-item thumbnail upload-state-done">' +
								'<em onclick="removeTemp()">X</em>' +
								'<img src="' + imgContent + '" width="' + thumbnailWidth + '" height="' + thumbnailHeight + '">' +
								'<div class="info"></div>' +
								'</div>';
							$("#fileList").append(lihtml);
						}
					
						// 当有文件添加进来的时候
						uploader.on('fileQueued', function(file) {
						
							var listHtml = $("#fileList").html();
							if(listHtml==""){
								var $li = $(
						            '<div id="tempId" class="file-item thumbnail">' +
						            '<em onclick="removeTemp()">X</em>' +
						                '<img>' +
						                '<div class="info">' + file.name + '</div>' +
						            '</div>'
						            ),
						        $img = $li.find('img');
						
								// $list为容器jQuery实例
								$list.append($li);
								
								fileBean = file;
						
								// 创建缩略图
								// 如果为非图片文件，可以不用调用此方法。
								// thumbnailWidth x thumbnailHeight 为 100 x 100
								uploader.makeThumb(file, function(error, src) {
									if (error) {
										$img.replaceWith('<span>不能预览</span>');
										return;
									}
						
									$img.attr('src', src);
								}, thumbnailWidth, thumbnailHeight);
							}
						});
					
						// 文件上传过程中创建进度条实时显示。
						uploader.on('uploadProgress', function(file, percentage) {
							var $li = $('#' + file.id),
								$percent = $li.find('.progress span');
					
							// 避免重复创建
							if (!$percent.length) {
								$percent = $('<p class="progress"><span></span></p>')
									.appendTo($li)
									.find('span');
							}
					
							$percent.css('width', percentage * 100 + '%');
						});
					
						// 文件上传成功，给item添加成功class, 用样式标记上传成功。
						uploader.on('uploadSuccess', function(file, response) {
							if (response.constructor == Object) {
								$("#j_water_form").append("<input type='hidden' name='waterUrl' value='" + response._raw + "' />");
							} else {
								$("#j_water_form").append("<input type='hidden' name='waterUrl' value='" + response + "' />");
							}
					
							$("#" + file.id).addClass("upload-state-done");
						});
					
						// 文件上传失败，显示上传出错。
						uploader.on('uploadError', function(file, response) {
							var $li = $('#' + file.id),
								$error = $li.find('div.error');
							// 避免重复创建
							if (!$error.length) {
								$error = $('<div class="error"></div>').appendTo($li);
							}
							$error.text('上传失败');
							setTimeout(function() {
								$li.slideUp("slow", function() {
									$li.remove();
								});
								uploader.removeFile(file);
							}, 1000);
						});
					
						// 完成上传完了，成功或者失败，先删除进度条。
						uploader.on('uploadComplete', function(file) {
							$('#' + file.id).find('.progress').remove();
						});
					
						function removeTemp(){
							var $li = $('#tempId');
							$li.remove();
							$("#waterUrl").val("");
							$("input[name='waterUrl']").remove();
							var fileArr = uploader.getFiles();
							if(fileArr.length>0){
								for(var i = 0; i < fileArr.length; i++){
									uploader.removeFile(fileArr[i]);
								}
							}
							if(typeof(fileBean)!=undefined){
								uploader.removeFile(fileBean);
							}
						}
					</script>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
    </div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
        <li><button type="submit" class="btn-default" data-icon="save">保存</button></li>
    </ul>
</div>
